<template>
  <view class="content">
    <u-navbar
      is-back="true"
      back-icon-color="#f6f6f6"
      title="穿搭详情"
      title-color="#f6f6f6"
      :background="navBackground"
    ></u-navbar>
    <view class="introduce-label" style="margin-top: 0px">
      <view>{{ cloth_name }}</view>
      <view style="display: flex; justify-content: center; align-items: center">
        <image
          src="https://nightowl.top/static/images/icons/money.png"
          style="height: 60rpx; width: 60rpx"
        >
        </image>
        <view style="margin-left: 20rpx; font-size: 28rpx">{{
          cloth_price + '元'
        }}</view>
      </view>
    </view>
    <!--轮播图部分-->
    <swiper class="swiper-box">
      <swiper-item v-for="(item, index) in navImgList" :key="index">
        <view style="width: 100%; height: 100%">
          <image class="swiper-img" :src="item"></image>
        </view>
      </swiper-item>
    </swiper>
    <view class="introduce-label">穿搭介绍</view>
    <view class="cloth-introduce">{{
      '&ensp;&ensp;&ensp;&ensp;' + cloth_introduce
    }}</view>
    <view class="introduce-label">
      <view>淘宝口令</view>
      <view style="display: flex; align-items: center" @click="copyDirection">
        <image
          src="https://nightowl.top/static/images/icons/copy.png"
          style="width: 60rpx; height: 60rpx"
        ></image>
      </view>
    </view>
    <view class="cloth-introduce" style="margin-bottom: 30rpx">{{
      '&ensp;&ensp;&ensp;&ensp;' + cloth_link
    }}</view>
    <view class="user-option" v-if="user_id != auth_id">
      <view
        :class="'iconfont ' + (is_like ? 'icon-like' : 'icon-no-like')"
        @click="userLike()"
        >点赞</view
      >
      <view
        :class="'iconfont ' + (is_save ? 'icon-save' : 'icon-no-save')"
        @click="userSave()"
        >收藏</view
      >
    </view>
    <view class="introduce-label">
      <view>最新评论</view>
      <view style="display: flex; align-items: center" @click="launchComment()">
        <image
          src="https://nightowl.top/static/images/icons/comment.png"
          style="width: 60rpx; height: 60rpx"
        ></image>
      </view>
    </view>
    <view>
      <scroll-view scroll-y="true">
        <view v-if="commentList.length">
          <view
            class="comment"
            v-for="(item, index) in commentList"
            :key="item.comment_id"
          >
            <view class="left"
              ><image :src="item.userInfo.user_avatar" mode="aspectFill"></image
            ></view>
            <view class="right">
              <view class="top">
                <view class="name">{{ item.userInfo.user_name }}</view>
                <view class="like" :class="{ highlight: item.is_liked }">
                  <view class="num">{{ item.like_num }}</view>
                  <u-icon
                    v-if="!item.is_liked"
                    name="thumb-up"
                    :size="30"
                    color="#9a9a9a"
                    @click="getLike(index)"
                  ></u-icon>
                  <u-icon
                    v-if="item.is_liked"
                    name="thumb-up-fill"
                    :size="30"
                    @click="getLike(index)"
                  ></u-icon>
                </view>
              </view>
              <view class="content">{{ item.contents }}</view>
              <!-- <view class="reply-box" >
								<view class="item" v-for="(item, index) in res.replyList" :key="item.index">
									<view class="username">{{ item.name }}</view>
									<view class="text">{{ item.contentStr }}</view>
								</view>
								<view class="all-reply" @tap="toAllReply" v-if="res.replyList != undefined">
									共{{ res.allReply }}条回复
									<u-icon class="more" name="arrow-right" :size="26"></u-icon>
								</view>
							</view> -->
              <view class="bottom">
                {{ item.date_time }}
                <view class="reply" @click="reply()">回复</view>
              </view>
            </view>
          </view>
        </view>
        <view v-else>
          <view class="empty-box" :style="{ height: windowHeight + 'px' }">
            <view>
              <image
                src="https://nightowl.top/static/images/icons/empty.png"
                mode="widthFix"
              ></image>
              <view>哇，沙发还是空着的呢~ </view>
            </view>
          </view>
        </view>
      </scroll-view>
      <!--评论弹出层-->
      <view class="comment-panel">
        <u-popup v-model="isShowCommentPanel" mode="bottom">
          <view
            style="
              display: flex;
              justify-content: center;
              padding: 30px 40px 20px;
            "
          >
            <view style="width: 300px">
              <scroll-view style="height: 80px" scroll-y="true">
                <textarea
                  v-model="commentText"
                  style="font-size: 14px; line-height: 20px"
                  placeholder="快来发布一条友善的评论吧~"
                />
              </scroll-view>
              <view
                style="width: 50%; transform: translateX(50%); margin-top: 15px"
              >
                <u-button @click="submitComment()" :ripple="true" type="success"
                  >发布</u-button
                >
              </view>
            </view>
          </view>
        </u-popup>
      </view>
    </view>
  </view>
</template>

<script>
let app = getApp();
export default {
  data() {
    return {
      navBackground: app.globalData.navBackground,
      navImgList: [],
      isShowCommentPanel: false,
      commentText: '',
      cloth_introduce: '',
      cloth_name: '',
      cloth_id: '',
      cloth_price: '',
      cloth_link: '',
      auth_id: '',
      user_id: '',
      is_like: '',
      is_save: '',
      commentList: [],
    };
  },
  onLoad(options) {
    uni.showLoading({
      title: '加载中...',
    });
    this.cloth_id = options.id;
    this.user_id =
      typeof app.globalData.user_id != 'undefined'
        ? app.globalData.user_id
        : '';
    this.getComment();
    uni.request({
      url: app.globalData.baseUrl + '/cloth/getById',
      data: {
        cloth_id: this.cloth_id,
        user_id: this.user_id,
      },
      success: (res) => {
        let result = res.data;
        if (!result.code) {
          let clothInfo = result.list[0];
          this.navImgList = JSON.parse(clothInfo.cloth_img);
          this.cloth_name = clothInfo.cloth_name;
          this.cloth_price = clothInfo.cloth_price;
          this.cloth_link = clothInfo.cloth_link;
          this.cloth_introduce = clothInfo.cloth_introduce;
          this.is_like = clothInfo.is_like;
          this.is_save = clothInfo.is_save;
          this.auth_id = clothInfo.auth_id;
        } else {
          app.showToast(result.msg);
        }
      },
      fail: (err) => {
        app.showToast('服务器错误，请稍后再试~');
        console.log('请求失败', err.errMsg);
      },
    });
  },
  methods: {
    // 跳转到全部回复
    toAllReply() {
      app.showToast('功能开发中，尽请期待哟~');
      return;
    },
    // 点赞
    getLike(index) {
      if (this.user_id == '') {
        app.showToast('您还没有登录哦~');
        return;
      }
      uni.request({
        url: app.globalData.baseUrl + '/comment/like',
        method: 'POST',
        data: {
          comment_id: this.commentList[index].comment_id,
          user_id: this.user_id,
          is_liked: this.commentList[index].is_liked,
        },
        success: (res) => {
          let result = res.data;
          if (result.code != -1) {
            app.showToast(result.msg, 'success');
            this.commentList[index].is_liked =
              !this.commentList[index].is_liked;
            if (this.commentList[index].is_liked == true) {
              this.commentList[index].like_num++;
            } else {
              this.commentList[index].like_num--;
            }
          } else {
            app.showToast(result.msg, 'none');
          }
        },
        fail: (err) => {
          console.log('请求失败', err.errMsg);
          app.showToast('请求失败,请稍后再试~', 'none');
        },
      });
    },
    launchComment() {
      console.log('用户点击评论');
      if (this.user_id == '') {
        app.showToast('您还没有登录哦~');
        return;
      }
      this.isShowCommentPanel = true;
    },
    // 评论列表
    getComment() {
      uni.request({
        url: app.globalData.baseUrl + '/comment/getCommentList',
        method: 'GET',
        data: {
          cloth_id: this.cloth_id,
          user_id: this.user_id,
        },
        success: (res) => {
          let result = res.data;
          if (!result.code) {
            if (typeof result.list != 'undefined')
              this.commentList = result.list;
            uni.hideLoading();
            if (this.isRefresh) {
              app.showToast('刷新成功', 'success');
              this.isRefresh = false;
            }
          } else {
            uni.hideLoading();
            app.showToast(result.msg);
          }
        },
        fail: (err) => {
          uni.hideLoading();
          console.log('请求失败', err.errMsg);
          app.showToast('请求失败,请稍后再试~');
        },
      });
    },
    //发布评论
    submitComment() {
      if (this.commentText == '') {
        app.showToast('评论内容不能为空哦~');
        return;
      }
      uni.request({
        url: app.globalData.baseUrl + '/comment/launch',
        method: 'POST',
        data: {
          cloth_id: this.cloth_id,
          user_id: this.user_id,
          contents: this.commentText,
        },
        success: (res) => {
          if (res.data.code != -1) {
            app.showToast(res.data.msg, 'success');
            //发布成功之后关闭必要的列表并刷新评论区
            this.isShowCommentPanel = false;
            this.getComment();
          }
        },
        fail: (err) => {
          uni.hideLoading();
          console.log('请求失败', err.errMsg);
          app.showToast('请求失败,请稍后再试~');
        },
      });
    },
    reply() {
      app.showToast('功能开发中，尽请期待哟~');
      return;
    },
    userLike: function () {
      if (!app.globalData.isLogin) {
        uni.showModal({
          title: '温馨提示',
          content: '检测到您还没有登录，是否前往登录？',
          success: (res) => {
            if (res.confirm) {
              uni.switchTab({
                url: '/pages/mine/mine',
              });
            }
          },
        });
        return;
      }
      uni.request({
        url: app.globalData.baseUrl + '/cloth/userLike',
        data: {
          user_id: this.user_id,
          cloth_id: this.cloth_id,
          token: app.globalData.token,
          is_like: this.is_like,
        },
        success: (res) => {
          if (!res.data.code) {
            this.is_like = !this.is_like;
            app.showToast(this.is_like ? '点赞收到了~' : '已取消点赞~');
          } else {
            app.showToast(res.data.msg);
          }
        },
      });
    },
    userSave: function () {
      if (!app.globalData.isLogin) {
        uni.showModal({
          title: '温馨提示',
          content: '检测到您还没有登录，是否前往登录？',
          success: (res) => {
            if (res.confirm) {
              uni.switchTab({
                url: '/pages/mine/mine',
              });
            }
          },
        });
        return;
      }
      uni.request({
        url: app.globalData.baseUrl + '/cloth/userSave',
        data: {
          user_id: this.user_id,
          cloth_id: this.cloth_id,
          token: app.globalData.token,
          is_save: this.is_save,
        },
        success: (res) => {
          if (!res.data.code) {
            this.is_save = !this.is_save;
            app.showToast(this.is_save ? '收藏成功~' : '已取消收藏~');
          } else {
            app.showToast(res.data.msg);
          }
        },
      });
    },
    copyDirection: function () {
      uni.setClipboardData({
        data: this.cloth_introduce,
        success: () => {
          app.showToast('复制成功', 'success');
        },
        fail: (err) => {
          app.showToast('复制失败');
          console.log('复制失败:', err.errMsg);
        },
      });
    },
  },
};
</script>

<style lang="scss">
page {
  background-color: #f4f4f4;
}

.introduce-label {
  height: 80rpx;
  padding: 0px 15rpx;
  margin: 20rpx 0px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  line-height: 80rpx;
  font-size: 36rpx;
  font-weight: bold;
  background-color: #dacdde;
  color: #fff;
}

.cloth-introduce {
  width: 90%;
  margin: 0px auto;
}

.swiper-box {
  height: 400px;
  width: 100%;
}

.swiper-img {
  width: 90%;
  height: 100%;
  display: block;
  margin: 0px auto;
}

.news-item {
  position: relative;
  width: 100%;
}

.news-img {
  width: 100%;
}

.news-title {
  z-index: 2;
  position: absolute;
  bottom: 0px;
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  background-color: red;
}

.tui-grid-icon {
  display: flex;
  justify-content: center;
  align-items: center;
}

.tui-grid-icon img {
  height: 80rpx;
  width: 80rpx;
  border-radius: 50%;
}

.tui-grid-label {
  font-size: 28rpx;
  text-align: center;
  margin-top: 12rpx;
}

.user-option {
  display: flex;
  flex-direction: row-reverse;
  margin-bottom: 40rpx;
}

.iconfont {
  display: flex;
  align-items: center;
  margin-right: 30rpx;
  font-size: 30rpx;
}

.iconfont::before {
  font-size: 60rpx;
  margin-right: 10rpx;
}
.comment {
  display: flex;
  padding: 30rpx;
  .left {
    image {
      width: 64rpx;
      height: 64rpx;
      border-radius: 50%;
      background-color: #f2f2f2;
    }
  }
  .right {
    flex: 1;
    padding-left: 20rpx;
    font-size: 30rpx;
    .top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10rpx;
      .name {
        color: #5677fc;
      }
      .like {
        display: flex;
        align-items: center;
        color: #9a9a9a;
        font-size: 26rpx;
        .num {
          margin-right: 4rpx;
          color: #9a9a9a;
        }
      }
      .highlight {
        color: #5677fc;
        .num {
          color: #5677fc;
        }
      }
    }
    .content {
      margin-bottom: 10rpx;
    }
    .reply-box {
      background-color: rgb(242, 242, 242);
      border-radius: 12rpx;
      .item {
        padding: 20rpx;
        border-bottom: solid 2rpx $u-border-color;
        .username {
          font-size: 24rpx;
          color: #999999;
        }
      }
      .all-reply {
        padding: 20rpx;
        display: flex;
        color: #5677fc;
        align-items: center;
        .more {
          margin-left: 6rpx;
        }
      }
    }
    .bottom {
      margin-top: 20rpx;
      display: flex;
      font-size: 24rpx;
      color: #9a9a9a;
      .reply {
        color: #5677fc;
        margin-left: 10rpx;
      }
    }
  }
}
.empty-box {
  display: flex;
  height: 300px;
  align-items: center;
  justify-content: center;
  width: 60%;
  margin: 0px auto;
  margin-top: -100rpx;
  text-align: center;
  color: #6c6c6c;
}

.empty-box image {
  width: 100%;
  margin-bottom: 60rpx;
}
</style>
